<template>
  <div class="category-main">

    <el-card shadow="never">
      <div slot="header">
        <span>乐居分类</span>
      </div>
      <el-row :gutter="20">
        <!-- 对于一个对象进行遍历,容易在获取对象的二级属性的时候报错! -->
        <!-- 对于分类数据 一定不要私自删除! -->
        <el-col v-for="item in lejuCategoryList" :key="item.id" :span="6">
          <el-card shadow="hover">
            <div slot="header">
              <span>{{ item.name }}</span>
            </div>
            <!-- card body -->
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" style="margin-top: 30px ">
      <div slot="header">
        <span>所有分类</span>
      </div>
      <el-table
        :data="allCategoryList"
        border
        stripe
        row-key="id"
      >
        <el-table-column
          prop="name"
          label="菜单名称"
        />
        <el-table-column
          label="图标"
        >
          <template slot-scope="scope">
            <img style="width:30px;height: 30px;" :src="scope.row.icon" alt="">
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
import { getAllCategory } from '@/api/product/category'
export default {
  name: 'Category', // 给组件起名字,方便vue-devtool调试
  components: {

  },
  data() {
    return {
      allCategoryList: [], // 所有的分类
      lejuCategoryList: [] // 乐居分类
    }
  },
  computed: {

  },
  created() {
    // 初始化分类数据
    this.getAllCategoryData()
  },
  mounted() {

  },
  methods: {
    getAllCategoryData() {
      getAllCategory().then(res => {
        const { success, data, message: errMsg } = res
        if (success) {
          // items就是所有的二级分类列表
          const { items } = data
          // 提取乐居的数据
          this.lejuCategoryList = items.find(one => one.category.name === '乐居').children
          // 我们需要把当前的数据格式转换为 树形table 需要的数据格式
          // {
          //  category: {
          //    k1:1,
          //    k2:1,
          //  },
          //  children: []
          // }
          // {
          //   k1:1,
          //   k2:1,
          //   children: []
          // }
          this.allCategoryList = items.map(item => {
            var rsItem = {
              ...item.category,
              children: item.children
            }
            return rsItem
          })
        } else {
          this.$message.error(errMsg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
